<template>
  <el-container class="height100 domainHeader">
    <el-header class="obpm-header-t">
      <admin_header :desc="$t('super_user_list')" :detail="super_detail" @breadCrumbClick="breadCrumbClick"/>
    </el-header>
    <el-main  v-show="mode=='LIST'" class="superUser height100 padding0 bgColor allContainerHeight" ref="managerMain">
      <div class="domainMainContent    containerHeight" >
        <el-main class="height100">
        <header_item  :headerArr="headerArr"  @onBtnClick="onBtnClick" :multipleSelection="multipleSelection"/>
        <div class="containerContentHeight">
          <el-row  ref="search">
          <el-col>
            <el-form :inline="true" :model="searchdata" class="demo-form-inline searchForm" size="mini"  @submit.native.prevent>
              <el-form-item >
                <el-input v-model="searchdata.name" :placeholder="$t('user_name')"  @keyup.enter.native="searchTableData"></el-input>
              </el-form-item>
              <el-form-item >
                <el-input v-model="searchdata.loginno" :placeholder="$t('loginno')"  @keyup.enter.native="searchTableData"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="searchTableData" type="primary" plain>{{$t('query')}}</el-button>
                <el-button @click="resetSearchTableData">{{$t('reset')}}</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <!-- 用户列表 -->
        <el-table :data="tableData.datas" 
        stripe
          @row-click="onRowClick"
          ref="multipleTable"
          :row-key="handleReserve" 
          @selection-change="handleSelectionChange"
          header-cell-class-name="tableHeaderbg"
          class="Trpointer superUserList"
          size="small"
          :height="tableListConHeight"
          >
          <el-table-column type="selection" width="55" ></el-table-column>
          <el-table-column prop="name" :label="$t('name')"></el-table-column>
          <el-table-column prop="loginno" :label="$t('loginno')"></el-table-column>
          <el-table-column prop="email" :label="$t('email')"></el-table-column>
          <el-table-column :label="$t('user_type')">
            <template slot-scope="scope">
                <template v-if="!isOpen">
                  <div  class="columnRole">
                   <span :title="$t('superAdmin')" v-if="scope.row.superAdmin">{{scope.row.superAdmin? $t('superAdmin') : ''}}</span>
                  <span :title="$t('develop')" v-if="scope.row.developer">{{scope.row.developer? $t('develop') : ''}}</span>
                  <span :title="$t('domain_admin')" v-if="scope.row.domainAdmin">{{scope.row.domainAdmin? $t('domain_admin') : ''}}</span>
                  </div>             
              </template>
                 <span  v-if="isOpen">{{setType(scope.row.type)}}</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="searchTableData"
          :current-page.sync="searchdata.currpage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="searchdata.pagelines"
          layout="prev, pager, next, total, sizes"
          background
          :total="tableData.rowCount?tableData.rowCount:0"
          ref="pagination"
        ></el-pagination>
        </div>
        </el-main>
      </div>
    </el-main >
    <superUser_detail :detail="content"  @exit="onExit" v-show="mode=='DETAIL'" v-if="mode=='DETAIL'"/>
  </el-container>
</template>

<script>
import admin_header from "@/components/admin_header.vue";
import superUser_detail from "@/components/superUser_detail.vue";
import { pxToRemScale } from '../utils'
import {delMsg} from '../utils/elementui'
export default {
  components: {
    admin_header,
    superUser_detail,
  },

  created() {
    this.level=this.$store.state.currentUser.level;
    if(this.$store.state.currentUser.isOpenSecurity){
      this.isOpen=true;
    }
    this.searchTableData();
    //关于标题的处理
    this.headerArr={iconfont:'icon-icon_tqyh',content:this.$t('super_user_list'),
    btnArr:[
      {type:'danger',name:'del',label:this.$t('del')},{name:'back',label:this.$t('back')}
     ] }
     if(this.level!=3){
      this.headerArr.btnArr.unshift({type:'primary',name:'new',label:this.$t('new')})
     }
  },

  data() {
    return {
      searchdata:{
        name:"",
        loginno:"",
        currpage:1,
        pagelines:10
      },
      tableData:{},
      multipleTable:[],
      content:{},
      mode:"LIST",
      multipleSelection:[],
      level:null,
      isOpen:false,//安全开关
      tableListConHeight:null,
      headerArr:{}
    };
  },

  methods: {
    onBtnClick(name){
      if(name=='new'){this.onCreateBtnClick()}
      else if(name=='del'){this.onDeleteBtnClick()}
      else if(name=='back'){this.onBack()}
    },
    breadCrumbClick(name){
      if(name==this.$t('super_user_list')){
         this.onExit()
      }
    },
    setType(type){
      let typeChina=this.$t('superAdmin');
      switch(type){
        case 'super':
          typeChina=this.$t('superAdmin');
        break;
        case 'admin':
          typeChina=this.$t('system_admin');
        break;
        case 'secret':
          typeChina=this.$t('secret');
        break;
        case 'examine':
          typeChina=this.$t('examine');
        break;
        case 'develop':
          typeChina=this.$t('develop');
        break;
      }
      return typeChina;
    },
    resetSearchTableData(){
      this.searchdata.name='';
      this.searchdata.loginno='';
      this.searchTableData();
    },
    onCreateBtnClick(){
      if(this.$store.state.currentUser.isOpenSecurity){
        //安全开关开启，默认issuperadmin和isdeveloper是false
        this.content={
          "status": 1,
          "superAdmin":false,
          "developer":false,
          "domainAdmin": false,
          "type":this.$store.state.currentUser.type,
          "domains": [],
          "applications": [],
        }
      }else{
        this.content={
          "status": 1,
          "domains": [],
          "applications": [],
          "superAdmin":false,
          "developer":false,
          "domainAdmin": false,
        }
      }
      this.mode="DETAIL";
    },
   async onDeleteBtnClick() {
      if (this.multipleSelection.length > 0) {
         await delMsg(this.$t('msg_confirm_delete'), this.$t('msg_tip'),this.$t('msg_confirm'),this.$t('cancel'))
            this.$api.deleteSuperUser(
              {
                data: this.multipleSelection,
              },
              {
                onSucess: (resp) => {
                  if (resp.data.errcode == 0) {
                    this.$message({
                      showClose: true,
                      message: this.$t("msg_del_success"),
                      type: "success",
                    });
                    this.searchTableData();
                  } else {
                    this.$message({
                      showClose: true,
                      message: resp.data.errmsg,
                      type: "error",
                    });
                  }
                },
                onError: function () {},
              }
            );
      } else {
        this.$message({
          showClose: true,
          message: this.$t("msg_select_superuser"),
          type: "error",
        });
      }
    },
    searchTableData(){
      this.$api.getSuperUserList(
         this.searchdata,
          {
            onSucess: resp => {
              if (resp.data.errcode == 0) {
                this.tableData=resp.data.data;
                this.$nextTick(() => {
                  this.$refs.multipleTable.doLayout()
                })
              } else {
                this.$message({
                  showClose: true,
                  message: resp.data.errmsg,
                  type: "error"
                });
              }
            },
            onError:(resp) => {
              this.$message({
                showClose: true,
                message: resp.data.errmsg,
                type: "false"
              });
            }
          }
        );
    },
    handleReserve(){
    },
    handleSizeChange(size){
      this.searchdata.pagelines=size;
      this.searchTableData();
    },
    handleSelectionChange(val){
      var arr = [];
       val.forEach((val) => {
        this.tableData.datas.forEach((v) => {
          if(val.id == v.id){
            arr.push(val.id)
          }
        })
      })   
      this.multipleSelection = arr;
    },
    onRowClick(row){
      row.confirmpwd = ''
      this.content=JSON.parse(JSON.stringify(row));
      this.mode="DETAIL";
    },
    onExit(){
      this.mode="LIST";
      this.searchTableData()
    },
    onBack(){
      this.$router.push({ name: 'home'})
    }
  },
  mounted(){
    let temp=pxToRemScale(this.$refs.search.$el.getClientRects()[0].height+this.$refs.pagination.$el.getClientRects()[0].height)
    this.tableListConHeight=`calc(100% - ${temp}rem)`;
  },
  computed:{
    super_detail(){
      let str
      if(this.mode == 'LIST'){
        str = ''
      }else{
        str = this.$t('superuser_detail')
      }
      return str
    }
  }
};
</script>

<style>
</style>